<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>自定义指令</title>
</head>
<body>
    <!-- 
        自定义指令用 directives字段声明
        里面的this都是 window
     -->
    <div id="app">
        <button @click="number++">点击n的值+1</button>
        <h1>当前的n值是：<span v-text="number"></span></h1>
        <!-- v-big 讲数字扩大10倍 -->
        <h1>放大10倍的n值是：<span v-big="number"></span></h1>
        <hr>
        <!-- v-fbind  和v-bind类似，但是可以让所绑定的input获得焦点 -->
        <input type="text" v-fbind="number">
    </div>
    <script>
        // 定义全局自定义指令 第一个参数Wie指令名称买第二个参数为配置对象/函数
        Vue.directive('fbind',{
             // 指令与元素成功绑定的时候
            bind(node, binding){
                node.value = binding.value
            },
            // 指令所在元素被插入页面时候调用
            inserted(node, binding){
                node.focus()
            },
            // 指令所在模更新的时候
            update(node, binding){
                node.value = binding.value
            }
        })

        const vm = new Vue({
            el:'#app',
            data:{
                number:12,
                name:'自定义指令',
            },
            directives:{
                // 两种写法，一个是对象，一个是函数,
                // 两个参数，第一个是真实dom， 第二个参数binding绑定对象
                // 什么时候调用： 1、指令与元素成功绑定的时候（一上来的时候） 2、指令所在的模板被重新解析时候
                big(node, binding){
                    node.innerText = binding.value*10
                    console.log('big',this);  // 注意，此处的this是 window
                },
                fbind:{
                    // 指令与元素成功绑定的时候
                    bind(node, binding){
                        node.value = binding.value
                    },
                    // 指令所在元素被插入页面时候调用
                    inserted(node, binding){
                        node.focus()
                    },
                    // 指令所在模更新的时候
                    update(node, binding){
                        node.value = binding.value
                    }
                }
            },
            
        })
    </script>
</body>
</html>